<template>
	<view v-if="visible" class="co-popup animated fadeIn faster">
		<view class="co-popup-mask" @tap.stop="onCancel"></view>
		<view class="edit-txt-pic">
			<view v-if="title" class="title">
				{{title}}
			</view>
			<block v-else>
				<view>{{subTitle}}</view>
				<view>
					<text v-if="isBlue" class="blue">{{contentBlue}}</text>
					{{content}}
				</view>
			</block>
			<view class="suggest">
				<textarea class="txtarea" v-model="txtareaDesc" :placeholder="placeholder" placeholder-style="color:#ccc;font-size:28rpx;"  maxlength="1000" @input="txtareaInput"/>
				<view class="img-container flex-wrap">
					<view class="img-upload">
						<image src="/static/logo.png" mode=""></image>
						<view class="round-fail">
							<view class="long-side">
								<view class="long-side"></view>
							</view>
						</view>
					</view>
					<view class="img-upload">
						<view class="img-item flex-aj-center">
							<view class="side">
								<view class="side"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn-box  flex-aj-center">
				<view class="cancel" @tap="onCancel">
					返回
				</view>
				<view class="confirm" @tap="onConfirm">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref, watch} from "vue";
	
	const props = defineProps({
	  modelValue: {
	    type: Boolean
	  },
	 //  isNoCancel: {
	 //    type: Boolean,
	 //  	default: false
	 //  },
	 subTitle: {
	    type: String,
		default: function(){
			return '拒绝补此订单'
		}
	  },
	  title: {
	    type: String
	  },
	  isBlue: {
	    type: Boolean,
	  	default: function(){
		  	return true
		}
	  },
	  contentBlue: {
		type: String,
		default: function(){
		   return '(订单编号：512155458754)'
		}
	  },
	  content: {
	    type: String,
		default: function(){
			return '的差价'
		}
	  },
	  placeholder:{
		type: String,
		default: function(){
		   return '请输入内容'
		}
	  }
	 //  cancel: {
	 //    type: String,
	 //  	default: '取消'
	 //  },
	 //  confirm: {
	 //    type: String,
	 //  	default: '确认'
	 //  },
	})

const emits = defineEmits(['update:modelValue' ,'confirm'])
const visible = ref(false)
//-----------------------------------watch----------------
	  
	watch(() => props.modelValue,(newVal,oldVal) => {
		// console.log(newVal,'newValue')
		// console.log(oldVal,'oldValue')
	  visible.value = newVal
	},{immediate:true})
	
//-----------------------------------data-----------------



	
//-----------------------------------function-------------
	
	const onCancel = () => {
	  visible.value = false
	  // console.log(visible.value)
	  emits('update:modelValue',  visible.value)
	}

	const onConfirm = () => {
		emits('confirm')
	}

</script>

<style scoped lang="scss">
	.edit-txt-pic{
		width: 542rpx;
		min-height: 454rpx;
		border-radius: 20rpx;
		z-index: 100;
		background-color: #fff;
		padding: 24rpx;
		position: relative;
		color: #444;
		text.blue{
			color: #0080FF;
			font-size: 24rpx;
		}
		.title{
			padding:  8rpx 0 12rpx;
			text-align: center;
			font-size: 32rpx;
		}
		.suggest{
			width: 494rpx;
			min-height: 220rpx;
			border-radius: 16rpx;
			background-color: #F7F7F7;
			padding: 16rpx;
			margin: 16rpx 0 90rpx;
			.txtarea{
				width: 462rpx;
				height: 100rpx;
				color: #999;
				overflow: hidden;
				font-size: 28rpx;
				// background-color: #FF243B;
			}
			.img-upload{
				margin-top: 40rpx;
				position: relative;
				image{
					width: 88rpx;
					height: 88rpx;
					border-radius: 20rpx;
					background-color: #ccc;
					margin-right: 20rpx;
				}
				.img-item{
					width: 88rpx;
					height: 88rpx;
					border-radius: 20rpx;
					border: 2rpx dashed #ccc;
					color: #ccc;
					font-size: 80rpx;
					font-weight: lighter;
					.side{
						width: 25rpx;
						height: 1.67rpx;
						background-color: #ccc;
						.side{
							width: 25rpx;
							height: 1.67rpx;
							background-color: #ccc;
							transform: rotateZ(90deg);
						}
					}
				}
			}
		}
		.btn-box{
			position: absolute;
			bottom: 0;
			left: 0;
			font-size: 32rpx;
			font-weight: bold;
			border-top: 1rpx solid rgba(229, 229, 229, 0.6);
			view{
				width: 271rpx;
				height: 93rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.cancel{
				color: #999;
				border-right: 1rpx solid rgba(229, 229, 229, 0.6);
			}
			.confirm{
				color: #0080FF;
			}
		}
	}
</style>
